<template>
  <view class="language-switch" @tap="handleChangeLang">
    {{ currentLanguageComputed }}
    <view class="icon icon-change"></view>
  </view>
</template>

<script name="language-switch" setup>
import useI18nStore from '@/store/modules/i18nStore';
import { useI18n } from 'vue-i18n';
import {
	initVueI18n,
	} from '@dcloudio/uni-i18n'

const { locale } = useI18n();
const uniI18n = initVueI18n();
const i18nStore = useI18nStore();
const currentLanguageComputed = computed(() => {
  return (i18nStore.language === 'zh-Hans' || !i18nStore.language) ? '简体中文' : '英文';
});

// 国际化切换
function handleChangeLang() {
  const toLang = i18nStore.language === 'zh-Hans' ? 'en' : 'zh-Hans';
  
  i18nStore.setLanguage(toLang); // 设置store语言
  locale.value = toLang; // vue-i18n设置语言
  /**
   * todo 待生效l with uni-i18n and uni-app
   */
  uniI18n.setLocale(toLang); // 设置uni-i18n语言
  uni.setLocale(toLang); // 设置uni-app语言
}
</script>

<style lang="scss" scoped>
.language-switch {
  display: flex;
  padding: 14rpx 24rpx;
  justify-content: flex-end;
  align-items: center;
  gap: 10rpx;
  // color: var(--font-color);
  border-radius: 4rpx;
  border: 2rpx solid #E5E5EB;
  // color: $theme-color;

  .icon {
    width: 24rpx;
    height: 24rpx;
    background: url('@/static/images/icon/change.png') no-repeat center center;
    background-size: contain;
  }
}
</style>